<template>
    <div>
<!--        面包屑导航-->
        <bread-nav>
            <span slot="nav1">商品管理</span>
            <span slot="nav2">商品分类</span>
        </bread-nav>
<!--        卡片视图-->
        <el-card>
            <el-button type="primary" size="mini" class="add_shop_btn" @click="addShopCate">添加分类</el-button>
<!--        添加商品分类对话框-->
            <add-shop-cate :message="addShopCateDia" :shop-cate12-list="shopCate12List"/>
            <el-table
                    :data="shopCateList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="cat_id"
                    :tree-props="{ hasChildren: 'hasChildren', children: 'children'}"
                    border>
                <el-table-column
                        label="#"
                        type="index">
                </el-table-column>
                <el-table-column
                        prop="cat_name"
                        label="分类名称"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        label="是否失效"
                        sortable
                        align="center"
                        width="180">
                    <template v-slot="scope">
                        <i class="el-icon-success" v-if="!scope.row.cat_deleted"></i>
                        <i class="el-icon-error" v-else></i>
                    </template>
                </el-table-column>
                <el-table-column
                        label="排序"
                        align="center">
                    <template v-slot="scope">
                        <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                        <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                        <el-tag type="warning" v-else>三级</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        width="400px"
                        align="center"
                        label="操作">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="editShopCate">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="delShopCate">删除</el-button>
                </el-table-column>
            </el-table>
            <!--        分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="shopCategory.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="shopCategory.pagesize"
                    :total="total"
                    layout="total,sizes, prev, pager, next, jumper">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import BreadNav from "../../components/content/BreadNav";
    import AddShopCate from "./goodsComp/AddShopCate";

    import {getShopCate} from "../../network/goods";

    export default {
        name: "ShopCategory",
        components:{
            BreadNav,
            AddShopCate
        },
        data(){
            return{
                shopCategory:{
                    type:3,
                    pagenum:1,
                    pagesize:2
                },
                shopCate12:{
                    type:2
                },
                shopCateList:[],
                shopCate12List:[],
                total:0,
                addShopCateDia:false
            }
        },
        methods:{
            //获取商品分类数据
            getShopCateM(){
                getShopCate(this.shopCategory).then(res => {
                    // console.log(res);
                    if(res.data.meta.status !== 200){
                        this.$message.warning(res.data.meta.msg)
                    }
                    this.shopCateList = res.data.data.result;
                    this.total = res.data.data.total
                })
            },
            //修改当前每页显示条数
            handleSizeChange(val){
                this.shopCategory.pagesize = val;
                this.getShopCateM()
            },
            //修改当前页
            handleCurrentChange(val){
                this.shopCategory.pagenum = val;
                this.getShopCateM()
            },
            //删除分类商品
            delShopCate(){
                this.$message.success('太简单了，本人不想做!')
            },
            //编辑分类商品
            editShopCate(){
                this.$message.success('太简单了，本人不想做!')
            },
            //监听添加商品分类的对话框事件
            addShopCate(){
                getShopCate(this.shopCate12).then(res => {
                    this.shopCate12List = res.data.data
                });
                this.addShopCateDia = !this.addShopCateDia
            }
        },
        mounted() {
            this.getShopCateM()
        },
        created() {
            this.$bus.$on('addShopCate',() => { this.addShopCateDia = !this.addShopCateDia});
            this.$bus.$on('getShopCateInfo',this.getShopCateM)
        }
    }
</script>

<style scoped lang="less">
    .add_shop_btn{
        margin-bottom: 1rem;
    }
    .el-icon-success{
        color: lightgreen;
    }
    .el-icon-error{
        color: red;
    }
</style>